<template>
  <div v-loading="loading" element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form  :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <!-- <el-col :md="6" :lg="4">
          <el-form-item label="指标维度" prop="flag">
            <el-select v-model="form.flag" filterable placeholder="请选择指标维度">
              <el-option
                v-for="item in flagList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-col> -->
         
         
          <el-col  :lg="4" :md="6">
            <el-form-item label="图片号"  prop="IMAGENO">
              <el-input v-model="form.IMAGENO" placeholder="请输入图片号" ></el-input>
            </el-form-item>
          </el-col>
           <el-col  :lg="4" :md="6">
            <el-form-item label="图片名称"  prop="IMAGENAME">
              <el-input v-model="form.IMAGENAME" placeholder="图片名" ></el-input>
            </el-form-item>
          </el-col>
            
          <el-col  :lg="4" :md="6">
            <el-form-item label="文字描述"  prop="IMAGEDESC">
              <el-input v-model="form.IMAGEDESC" placeholder="请输入图片文字描述" ></el-input>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :lg="2" :md="3"  class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="query">查询</el-button>
          </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
       <el-row :gutter="10">
          <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Add')">
          <el-button type="primary" size="mini" @click="ImageAdd" icon="el-icon-plus">新增</el-button>
        </el-col>
         <!-- <el-col :lg='2' :md='3' v-if="btnPermission('Button_DevInfo_Edit')">
            <el-button type='primary' size='mini' icon='el-icon-edit' class='b-button' :disabled="currentRow.length!=1"
            @click='UpdateRoomInfo'>修改</el-button>
        </el-col> -->
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Delete')">
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="del" :disabled="currentRow.length!=1">删除</el-button>
        </el-col>
      
      </el-row> 
      <el-table
        :data="tableData"

        ref="table"
        border
        class="tableMarginTop"
        highlight-current-row
        @selection-change="handleCurrentChange"
        header-row-class-name="tableHeaderClass"
        style="min-height:390px;">
        <el-table-column type="selection" width="40px"></el-table-column>  
        <el-table-column prop="IMAGENO" label="图片号"  width="160px" ></el-table-column>
         <el-table-column prop="IMAGENAME" label="图片名"   width="200px" ></el-table-column>
        <el-table-column prop="IMAGEDESC" label="文字描述"  width="200px"></el-table-column>  
         <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" v-if="scope.row.AdType != 'C'" @click="dialogDetail(scope)">预览</el-button>
              </template>
         </el-table-column>
      
      </el-table>
      <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
        <el-pagination
          :current-page="currentPage"
          background
          @size-change="handleSizeChange"
          :page-sizes="[10,25,50,100]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next, jumper"
          :total="totalRcrdNum"
          @current-change="changePage"
        ></el-pagination>
      </div>
    </el-card>
      <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" :lock-scroll=false @close="dialogDetailClose">
      <div v-loading="loadingImg" style="text-align:center;">
        <h4 v-if="loadingImgError">加载图片失败</h4>
        <img style="width:100%;min-height:340px;position:relative;" :src="dialogImageUrl" alt="" @load="loadingImg=false"
          @error="loadingImgFalse">
      </div>
    </el-dialog>
     <!-- 弹窗 -->
    <keep-alive>
      <component :is="dialogList.addaddlocalCardDialog" :option="dialogOptions" @refreshTable="query" ></component>
    </keep-alive>
  </div>
</template>

<script>
import toolBox from "@/common/utils/toolBox";
import addaddlocalCardDialog from "./dialog/addDialog";
import getGlobalParams from "@/common/utils/getGlobalParams";
import requestYg from "@/common/utils/requestYg";
import queryBackgroundImage from "@/message/siteManagement/workplacemonitoring/queryBackgroundImage";
import updateRoomInfo from "@/message/siteManagement/workplacemonitoring/updateRoomInfo";

export default {
  name: "",
  data() {
    return {
      "flag": {
          "0": "坐席",
          "1": "非坐席",
          
      },
  
      "FLAG": {
          "1": "是",
          "0": "否"
      },
      flagList: [
        { name: "坐席", value: "0" },
        { name: "非坐席", value: "1" },
       
      ],
      loadingImgError:true,
      dialogVisible: false,
      loadingImg: false,
      dialogImageUrl:'',
      pageSize: undefined, //表格每页的条数
      form: {
      IMAGENO:"",//房间名称
      IMAGENAME:"",//房间号
      IMAGEDESC:"",  //工位数

      },
      currentRow: [], //表格当前选中行
      currentPage: 1, //表格当前页
      totalRcrdNum: 0,
      tableData: [], //表格 数据
      loading: false, //loading遮罩
      total: 0, //表格总条数
      checkedUser: false, //控制按钮是否可用
      isDisabledDel: false,
      dialogList: {
        //指定被渲染组件列表
        addaddlocalCardDialog,
      },
      dialogOptions: {
        //新增
        isShow: false,

      },
    };
  },
  computed: {},
  
  created: function(){
    this.pageSize = getGlobalParams.get("PageSize");
    this.query();
  },
   watch: {
  },
  methods: {

   //查询
    async query(){
      let resBody = new queryBackgroundImage();

       resBody.data.IMAGEDESC = this.form.IMAGEDESC;//文字描述
       resBody.data.IMAGENO =this.form.IMAGENO ;//图片号
       resBody.data.IMAGENAME=this.form.IMAGENAME;//图片名

      resBody.data.pageflag = 4;//分页标识(1-最后一页,2-上一页,3-下一页,4-当前页)
      resBody.data.pagerownum = this.pageSize; //表格每页的条数
      resBody.data.currpage = this.currentPage;//当前页
      console.log("底图query的resBody.data",resBody.data);
        requestYg(resBody)
        .then(response => {
          console.log("底图信息查询的response，",response);
      // 总条数
           this.totalRcrdNum = response.RSP_BODY.TotalNum
          ? response.RSP_BODY.TotalNum
          : 0;
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.tableData = response.RSP_BODY.Result || [];
        
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.tableData=[];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    
    },
  // 删除弹出
    del() {
      this.$confirm("该条图片信息将被删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.paramDel();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
        // this.limstr="";
    },
    paramDel() {      //删除底图
      this.loading = true;
      let resBody = new queryBackgroundImage();
      resBody.data.oper_type= 'D';
      resBody.data.IMAGENAME= this.currentRow[0].IMAGENAME;
      resBody.data.IMAGENO = this.currentRow[0].IMAGENO;
      console.log("底图删除resBody.data,",  resBody.data);

      requestYg(resBody)
        .then(response => {
          console.log("底图删除response",response);
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.$message({
              type: "success",
              message: "底图删除成功!"
            });
            this.query();
          } else {
            this.loading = false;
            this.$message({
              type: "warning",
              message: "底图删除失败!"
            });
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
   
    //预览功能
      dialogDetail(scope,) {
        console.log(scope,);
        this.loadingImgError = false;
        this.dialogVisible = true;
        this.loadingImg = true;
        //这里的地址在globalParams中配置  需要和后台的存放文件的配置统一
        //在这里只取图片下行地址中的ip地址
        var IpAddress =
          getGlobalParams.get("WorkPlaceMonitorBackgroundImgDownloadUrl");
        //在表格中返回的内容只有相对地址，所以需要使用ip地址拼接
         console.log("IpAddress,",IpAddress);
        console.log("scope.row.IMAGENAME,",scope.row.IMAGENAME);
      
        this.dialogImageUrl =IpAddress+scope.row.IMAGENAME;
      },
       dialogDetailClose() {
        this.dialogImageUrl = "";
      },
       loadingImgFalse() {
        this.loadingImg = false;
        this.loadingImgError = true;
      },
    // 添加
     ImageAdd() {
      //添加
       console.log("点击了按钮 新增 按钮");
        this.$router.push({
                        path: "/ImageAdd",
                        // params: {
                          // firstLog: this.$store.getters.isFirstLoginFLag,
                          // firstLogMessage: data.SYS_HEAD.ReturnMessage

                        // }
                      });
   
    },
    // 对话框展示
     UpdateRoomInfo() {
       console.log("UpdateRoomInfo");
         this.$router.push({
                        path: "/UpdateRoom",
                        // params: {
                          // firstLog: this.$store.getters.isFirstLoginFLag,
                          // firstLogMessage: data.SYS_HEAD.ReturnMessage

                        // }
                      });

      
    },
     // 重置查询条件
    clearForm(item) {
      this.$refs["" + item].resetFields();
    },
    changePage(val) {
      this.currentPage = val;
      this.query();
    },
    refreshTable() {
      //刷新数据并清除选中的数据
      // this.businesstypeList();
    },
  
    handleCurrentChange(val) {
      console.log("handleCurrentChange,val,",val);
      //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
      this.currentRow = val;
    },
    handleSizeChange(val){
      this.pageSize=val;
      this.query();
    },
    readrealTimeMonitor(row){
      console.log("查看",row);
       this.$router.push({
                        path: "/realTimeMonitor",
                        // params: {
                          // firstLog: this.$store.getters.isFirstLoginFLag,
                          // firstLogMessage: data.SYS_HEAD.ReturnMessage

                        // }
                      });


    }
      
    },
  
  }

</script>


<style lang="scss" scoped>
.selectTree {
  min-width: 150px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-card {
  width: 100%;
}
.el-form-item {
  margin-left: 30px;
}
.el-form-item1 {
  margin-left: 10px;
}
.box2-button {
  width: 80px;
}

.el-card {
  overflow: inherit;
}
</style>